<template>
	<view class="container">
		<div v-if="!showSignUpFlag && !showForgotPasswordFlag" class="form-container">
			<p class="title">邮箱登录</p>
			<form class="form">
				<input v-model="loginEmail" type="email" class="input" placeholder="邮箱">
				<input v-model="loginPassword" type="password" class="input" placeholder="密码">
				<p class="page-link">
					<span class="page-link-label" @click="showForgotPassword">忘记密码?</span>
				</p>
				<button type="submit" class="form-btn tracking-widest" @click="submitLogin">登录</button>
			</form>
			<p class="sign-up-label">
				还没有账号?<span class="sign-up-link" @click="showSignUp">注册</span>
			</p>
		</div>
		<div v-if="showForgotPasswordFlag" class="form-container">
			<p class="title">找回密码</p>
			<form class="form">

				<van-cell-group inset>
					<input required v-model="email2" id="inputemail" name="email" type="email" class="input"
						placeholder="请输入邮箱">
					<input v-if="smsCodeFlag" type="password" class="input" placeholder="输入密码" v-model='password2'>

					<view class="verify"
						style="display: flex;width: 100%;vertical-align: middle;justify-content: space-between;padding: 2vh 5vw;height: auto;">
						<input class="inputsms" type="text" placeholder="请输入验证码" v-model="smsCode"
							style="border-bottom: 1px solid #8799a3;width: 60%;height: 5vh;" />
						<van-button :disabled="canGetFindCode" size="small" @click="getFindcode" type="primary">{{
			getCodeFindButtonText }}</van-button>
					</view>
				</van-cell-group>
				<button class="form-btn tracking-widest" @click="ToBack">修改</button>
			</form>
			<p class="sign-up-label">
				通过邮箱<span class="sign-up-link" @click="showForgotPassword">登录</span>
			</p>
		</div>

		<div v-if="showSignUpFlag && !showForgotPasswordFlag" class="form-container">
			<p class="title">注册</p>
			<form class="form">
				<input type="email" class="input" placeholder="请输入邮箱" v-model='email'>

				<input v-if="smsCodeFlag" type="nickname" class="input" placeholder="设置昵称" v-model='name'>
				<input v-if="smsCodeFlag" type="password" class="input" placeholder="设置密码" v-model='password'>

				<van-cell-group style="width: 100%; display: flex;margin: 0;" inset>
					<view class="verify"
						style="display: flex;width: 100%;vertical-align: middle;justify-content: space-between;padding: 2vh 5vw;height: auto;">
						<input class="inputsms" type="text" placeholder="请输入验证码" v-model="sms"
							style="border-bottom: 1px solid #8799a3;width: 60%;height: 5vh;" />
						<van-button :disabled="canGetCode" size="small" @click="getRegistercode" type="primary">{{
			getCodeButtonText }}</van-button>
					</view>
				</van-cell-group>
				<button class="form-btn tracking-widest" @click="toReg">注册</button>
			</form>
			<p class="sign-up-label">
				已经有账号?<span class="sign-up-link" @click="showSignUp">登录</span>
			</p>
		</div>
	</view>
</template>

<script setup>
import {
	login,
	regin,
	getRegisteremailcode,
	verfryEmail,
	forgetPassword,
	getFindBackemailcode
} from '@/store/api.js'
import {
	flat
} from 'vant/lib/utils';
import {
	ref,
	computed
} from 'vue'
const email = ref('')
const email2 = ref('')
const log = ref(true)
const loginEmail = ref('')
const loginPassword = ref('')
const password = ref('') //注册密码
const password2 = ref('') //注册验证码
const sms = ref('') //注册的验证码
const smsCode = ref('') //找回密码的验证码
const timer = ref(60)
const timer2 = ref(60)
const name = ref('')
const showSignUpFlag = ref(false)
const showForgotPasswordFlag = ref(false)
const showForgotPassword = () => {
	showForgotPasswordFlag.value = !showForgotPasswordFlag.value
}
const smsCodeFlag = ref(false)
const toReg = () => { //注册
	uni.showLoading({
		title: '注册中'
	})
	regin(name.value, email.value, password.value, sms.value).then(res => {
		showSignUpFlag.value = false
		showForgotPasswordFlag.value = false
		loginEmail.value = email.value
		loginPassword.value = password.value
		uni.hideLoading()
	}).catch(err => {
		uni.hideLoading()
	})
}
const canGetCode = ref(false)
const canGetFindCode = ref(false)
const getCodeButtonText = computed(() => {
	return !canGetCode.value ? '获取验证码' : `${timer.value}秒后重试`;
});
const getCodeFindButtonText = computed(() => {
	return !canGetFindCode.value ? '获取验证码' : `${timer2.value}秒后重试`;
});
const showSignUp = () => {
	showSignUpFlag.value = !showSignUpFlag.value
}
const submitLogin = () => { //邮箱登录
	uni.showLoading({
		title: '登录中'
	})
	login(loginEmail.value, loginPassword.value).then(res => {
		uni.hideLoading()
	})
}
const toLogin = () => {

	uni.showLoading({
		title: '登录中...'
	});
	setTimeout(function () {
		login(loginEmail.value, loginPassword.value);
		uni.hideLoading()
	}, 500);
}
//获取验证码
const getRegistercode = async () => {
	console.log(email.value)
	if (email.value) {
		let result = await verfryEmail(email.value)
		console.log(result)
		if (result) {
			// 发送验证码到邮箱的逻辑
			console.log(`发送验证码到邮箱: ${email.value}`);
			let data = {
				email: email.value
			}
			getRegisteremailcode(data)
			// getRegisteremailcode(data)
			smsCodeFlag.value = true
			canGetCode.value = true;
			// 禁用按钮并开始计时
			let intervalId = setInterval(() => {
				if (timer.value > 0) {
					timer.value--;
				} else {
					clearInterval(intervalId);
					canGetCode.value = false;
					timer.value = 60; // 重置计时器
				}
			}, 1000);
		} else {
			uni.showToast({
				icon: 'error',
				title: '该邮箱已注册'
			})
		}
	} else {
		uni.showToast({
			icon: 'error',
			title: '请输入邮箱'
		})
	}
}
const getFindcode = () => {
	if (email2.value) {
		smsCodeFlag.value = true
		if (verfryEmail(email2.value)) {
			// 发送验证码到邮箱的逻辑
			console.log(`发送验证码到邮箱: ${email.value}`);
			let data = {
				email: email2.value
			}
			getFindBackemailcode(data)
			canGetFindCode.value = true;
			// 禁用按钮并开始计时
			let intervalId = setInterval(() => {
				if (timer2.value > 0) {
					timer2.value--;
				} else {
					clearInterval(intervalId);
					canGetFindCode.value = false;
					timer2.value = 60; // 重置计时器
				}
			}, 1000);
		} else {
			uni.showToast({
				icon: 'error',
				title: '邮箱尚未注册'
			})
		}
	} else {
		uni.showToast({
			icon: 'error',
			title: '请输入邮箱'
		})
	}
}
const ToBack = () => { //找回密码
	uni.showLoading({
		title: '找回中'
	})
	forgetPassword(password2.value, email2.value, smsCode.value).then(res => {
		uni.hideLoading()
		showForgotPasswordFlag.value = false
		showSignUpFlag.value = false
		loginEmail.value = email2.value
		loginPassword.value = password2.value
	}).catch(err => {
		uni.hideLoading()
	})
}
const verifyCodefindpassword = (event) => {
	event.preventDefault();
	console.log(email.value)
}
</script>

<style scoped>
.van-cell-group--inset {
	margin: 0;
	width: 100%;
}

.input {
	height: 90px
}

@media screen and (min-width: 600px) {
	.container {
		width: 100% !important;
		display: flex;
		justify-content: center;
	}

	.inputsms {
		width: 50px;
		margin-right: 40px;

	}

	.form-container {
		width: 80%;
	}

	.verify {
		justify-content: space-between;
		display: flex;
		padding: 0;
		margin: 0;
	}

}

.container {
	width: 100vw;

}

.form-container {

	/* width: 350px;
	height: 500px; */
	/* width: 50%; */
	background-color: #fff;
	box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
	border-radius: 10px;
	box-sizing: border-box;
	padding: 20px 30px;
}

.title {
	text-align: center;
	font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
		"Lucida Sans Unicode", Geneva, Verdana, sans-serif;
	margin: 10px 0 30px 0;
	font-size: 28px;
	font-weight: 800;
}

.form {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin-bottom: 15px;
}

.input {
	height: 40px;
	border-radius: 20px;
	border: 1px solid #c0c0c0;
	outline: 0 !important;
	box-sizing: border-box;
	padding: 12px 15px;
	margin-top: 15px;
	margin-bottom: 15px;
}

.page-link {
	text-decoration: underline;
	margin: 0;
	text-align: end;
	color: #747474;
	text-decoration-color: #747474;
	margin-bottom: 20px;
}

.page-link-label {
	cursor: pointer;
	font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
		"Lucida Sans Unicode", Geneva, Verdana, sans-serif;
	font-size: 9px;
	font-weight: 700;
}

.page-link-label:hover {
	color: #000;
}

.form-btn {
	padding: 10px 15px;
	font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
		"Lucida Sans Unicode", Geneva, Verdana, sans-serif;
	border-radius: 20px;
	border: 0 !important;
	outline: 0 !important;
	background: teal;
	color: white;
	cursor: pointer;
	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;

}

.form-btn:active {
	box-shadow: none;
}

.sign-up-label {
	margin: 0;
	font-size: 10px;
	color: #747474;
	font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
		"Lucida Sans Unicode", Geneva, Verdana, sans-serif;
}

.sign-up-link {
	margin-left: 1px;
	font-size: 11px;
	text-decoration: underline;
	text-decoration-color: teal;
	color: teal;
	cursor: pointer;
	font-weight: 800;
	font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
		"Lucida Sans Unicode", Geneva, Verdana, sans-serif;
}

.buttons-container {
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	margin-top: 20px;
	gap: 15px;
}

.apple-login-button,
.google-login-button {
	border-radius: 20px;
	box-sizing: border-box;
	padding: 10px 15px;
	box-shadow: rgba(0, 0, 0, 0.16) 0px 10px 36px 0px,
		rgba(0, 0, 0, 0.06) 0px 0px 0px 1px;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
	font-family: "Lucida Sans", "Lucida Sans Regular", "Lucida Grande",
		"Lucida Sans Unicode", Geneva, Verdana, sans-serif;
	font-size: 11px;
	gap: 5px;
}

.apple-login-button {
	background-color: #000;
	color: #fff;
	border: 2px solid #000;
}

.google-login-button {
	border: 2px solid #747474;
}

.apple-icon,
.google-icon {
	font-size: 18px;
	margin-bottom: 1px;
}

.container {
	display: flex;
	flex-direction: column;
	align-items: center;
	height: 100vh;
	background: #d6ecf0;
	justify-content: space-around;
}

.login-form {
	width: 80%;
	height: 60%;
	border-radius: 20px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-evenly;
}
</style>